<template>
  <div class="hawkContent">
    <hawk-breadcrumb></hawk-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="3" style="border-right:1px solid #f0f0f0;height:84vh">
        <el-input placeholder="输入名称搜索" v-model="name"
        @keydown.enter="tupoSearch"
                  style="margin-bottom:10px;">

        </el-input>
        <el-tree class="filter-tree" :data="ciList" :props="{ label: 'name' }"
                 default-expand-all :filter-node-method="filterNode"
                 @node-click="handleNodeClick" ref="tree">
        </el-tree>

        <el-pagination small layout="prev, pager, next" :total="total">
        </el-pagination>

      </el-col>

      <el-col :span="21" style="padding:0 ">
        <topo-pannel :id="id" :isAdd="isAdd" :type="type" :isPreview="true"
                     ref="topo"></topo-pannel>

      </el-col>
    </el-row>
  </div>
</template>

<script type="text/javascript">
/*
 * @author 宋辉辉
 * @description 查看拓扑的视图层
 * @api 无
 * @since 2021-11-15 15:27:44
 * @update 2021-11-15 15:27:44
 * @modifier 宋辉辉
 * @bug 无
 * @version v1.0.0
 */
import { getList } from '@/api/assets/ci/room'
import topoPannel from './components/topoPannel.vue'

export default {
  components: { topoPannel },
  data () {
    return {
      id: 0,
      type: '',
      node: {},
      ciList: [],
      isAdd: false,
      page: {
        current: 1,
        size: 10
      },
      total: 0,
      name: ''
    }
  },
  created () {
    this.id = this.routerParam.id
    this.type = this.routerParam.type
    this.init()
  },
  methods: {

    tupoSearch(value){
      console.log(value);
      if(value.trim().length==0){
          return
      }  

      this.$eventHub.$emit('ci-search-name',value.trim())
    },
    handleNodeClick (node) {
      this.id = node.id
      this.isAdd = false
    },
    async init () {
      let res = { data: '' }
      if (this.type == 'room') {
        console.log('1111');
        // 机房视图
        res = await getList({
          query: {
            name: this.name,
            type: 0
          }
        })
      } else {
        console.log('2222 -- 业务视图');
        res = await getList({
          query: {
            name: this.name,
            type: 1
          }
        })
      }

      console.log(res);
      this.ciList = res.data.list
      this.total = res.data.total
    },
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  },
  watch: {
    name (val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>

<style scoped></style>
